<template>
  <div class="edit-comp-body common-content">
    <el-scrollbar style="height: 100%">
      <div class="scrollbar-box">
        <div class="top-search-bar">
          <el-form size="small" ref="queryForm" inline>
            <el-form-item>
              <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-back"
                  @click="$router.go(-1)">返回
              </el-button>
              <el-button
                  type="primary"
                  size="small"
                  @click="$router.replace({name:'FunList',query:{id:$route.query.id}})">函数列表
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="comp-item-group">
          <div class="comp-item-box">
            <div class="comp-item-title">组件信息</div>
            <div class="comp-item-cont">
              <el-form
                  :model="basicForm"
                  :rules="basicRules"
                  ref="basicForm"
                  label-width="100px"
                  size="small"
                  class="demo-ruleForm">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="组件名称" prop="pluginsName">
                      <el-input v-model="basicForm.pluginsName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="组件版本" prop="pluginsVesion">
                      <el-input v-model="basicForm.pluginsVesion"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="组件类型">
                      <el-select class="w100"
                                 ref="mysel"
                                 v-model="basicForm.libraryId"
                                 placeholder="选择组件类型">
                        <el-option
                            v-for="item in Plx"
                            :key="item.id"
                            :label="item.libraryName"
                            :value="item.id">
                          <span>{{ item.libraryName }}</span>
                        </el-option>
                        <div class="text-center ptb10" @click="libraryAdd">
                          <el-button type="primary" size="mini">新增分类</el-button>
                        </div>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="数据入库" prop="isIndb">
                      <el-select class="w100" v-model="basicForm.isIndb" placeholder="数据是否入库">
                        <el-option label="入库" value="0"></el-option>
                        <el-option label="不入库" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否监听" prop="isMonitor">
                      <el-select class="w100" v-model="basicForm.isMonitor" placeholder="数据是否监听">
                        <el-option label="监听" value="0"></el-option>
                        <el-option label="不监听" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="是否切换" prop="isSwitch">
                      <el-select class="w100" v-model="basicForm.isSwitch" placeholder="数据是否切换">
                        <el-option label="切换" value="0"></el-option>
                        <el-option label="不切换" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="版本说明" prop="pluginsRemarks">
                      <el-input
                          type="input"
                          v-model="basicForm.pluginsRemarks"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="场景描述" prop="pluginsScene">
                      <el-input type="input" v-model="basicForm.pluginsScene"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="备注" prop="remarks">
                      <el-input type="input" v-model="basicForm.remarks"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>

          <div class="comp-item-box">
            <div class="comp-item-title">运行环境</div>
            <div class="comp-item-cont">
              <el-form
                  :model="prequireForm"
                  ref="InfoForm"
                  label-width="100px"
                  size="small"
                  class="demo-ruleForm">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="最小CPU">
                      <el-input
                          type="number"
                          v-model="prequireForm.requireCPU"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="最小存储单元">
                      <el-input
                          type="number"
                          v-model="prequireForm.requireDisk"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="最小GPU">
                      <el-input
                          type="number"
                          v-model="prequireForm.requireGPU"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="运行内存要求">
                      <el-input
                          v-model="prequireForm.requireMemory"
                          type="number"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="备注" prop="remarks">
                      <el-input type="input" v-model="prequireForm.remarks"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div class="comp-item-box">
            <div class="comp-item-title">切换信息</div>
            <div class="comp-item-cont">
              <el-form
                  :model="paswitchForm"
                  ref="InfoForm"
                  label-width="100px"
                  size="small"
                  class="demo-ruleForm">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="组件切换名称">
                      <el-input v-model="paswitchForm.switchName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="组件切换地址">
                      <el-input
                          v-model="paswitchForm.switchAddress"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="备注">
                      <el-input
                          type="input"
                          v-model="paswitchForm.remarks"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="上传组件">
                      <el-upload
                          class="upload-demo"
                          action="#"
                          :http-request="environmentFile">
                        <el-button size="small" type="primary">点击上传
                        </el-button>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>

          <div class="comp-item-box">
            <div class="comp-item-title">监控信息</div>
            <div class="comp-item-cont">
              <el-form
                  :model="pamonitorForm"
                  ref="InfoForm"
                  label-width="100px"
                  size="small"
                  class="demo-ruleForm">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="监控频率/s">
                      <el-input
                          type="number"
                          v-model="pamonitorForm.monitorRate"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="监控类型" prop="systemId">
                      <el-select
                          class="w100"
                          v-model="pamonitorForm.monitorType"
                          placeholder="请选择使用系统">
                        <el-option label="全部" :value="2"></el-option>
                        <el-option label="进程监控" :value="0"></el-option>
                        <el-option label="数据监控" :value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="备注" prop="remarks">
                      <el-input type="input" v-model="pamonitorForm.remarks"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>

            <div class="comp-item-btn-group">
              <el-button @click="preservation" type="primary" size="small" :loading="btnLoading">保存修改</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <Dialog
        :addNewVisible="libraryShow"
        @closeDia="rlibraryClo"
        width="520px"
        :center="true"
        title="新增组件分类">
      <div slot="body">
        <div class="libBody">
          <span>组件分类名称</span>
          <el-input type="input" v-model="libraryName"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="rlibraryClo">取 消</el-button>
          <el-button type="primary" @click="rlibraryEnt">确 定</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
const Type = {
  0: "进程监控",
  1: "数据监控",
  2: "全部",
};
const Type2 = {
  进程监控: "0",
  数据监控: "1",
  全部: "2",
};
import Dialog from "@/components/Dialog/Dialog.vue";
import Table from "@/components/Table";
import {
  get_getPClass,
  post_updateFunction,
  put_funactonAdd,
  del_deletePFunction,
  put_updatePluginsInfo,
  get_getPLibrarySelect,
  put_addPLibrary
} from "@/apis/assembly/assembly";
import {get_getPlugins} from "@/apis/comList/comList";

export default {
  components: {
    Dialog,
    Table,
  },

  data() {
    return {
      listInfo: [], //获取到的当前组件总信息
      Plx: "",
      basicForm: {
        //基本信息表单
        pluginsName: "",
        pluginsVesion: "",
        isIndb: "0",
        isMonitor: "0",
        isSwitch: "1",
        pluginsRemarks: "",
        pluginsScene: "",
        remarks: "",
        file: "",
        libraryId: "",
      },
      basicRules: {
        //基本信息验证
      },
      pfunctionList: [],
      activeNames2: ["1", "2"],
      paramType: false, //参数类型弹框
      TitleFlag: "1", //参数类型  1入参  2出参
      cities: [], //参数类型
      FncData: [], //函数表格数据
      putType: [], //入参类型
      outType: [], //出参类型
      tempType: [], //临时中转类型
      PutIndex: [],
      tableHeader: [
        {
          prop: "functionName",
          name: "函数名",
        },
        {
          prop: "paramInputClass",
          name: "函数入参",
        },
        {
          prop: "paramOutputClass",
          name: "函数出参",
        },
        {
          prop: "remarks",
          name: "备注",
          button: true,
        },
      ], //表个头
      diaData: {functionName: "", remarks: ""}, //弹框数据
      rowId: "", //当前行id
      InfoForm: {
        arr: [
          {
            pluginsId: "",
            systemId: "",
            requireCPU: "",
            requireDisk: "",
            requireGPU: "",
            requireMemory: "",
            remarks: "",
            file: "",
          },
          {
            monitorRate: "",
            monitorType: "",
          },
          {
            switchName: "",
            switchAddress: "",
          },
        ],
      },
      libraryName: '',

      libraryShow: false,

      prequireForm: {},
      paswitchForm: {},
      pamonitorForm: {},
      btnLoading: false
    };
  },
  created() {
    this.getInfo();
    //获取组件信息
    this.getType();
  },
  methods: {
    //获取组件信息
    getInfo() {
      get_getPlugins({pluginsId: this.$route.query.id}).then(
        (res) => {
          let {code, data} = res.data;
          if (code == 0) {
            this.listInfo = data;
            // 基本信息
            for (const key in this.basicForm) {
              this.basicForm[key] = this.listInfo.plugins[key] + "";
            }
            if (data.plugins.pl) {
              this.basicForm.libraryId = data.plugins.pl.libraryId
            } else {
              this.basicForm.libraryId = ''
            }

            // 函数列表
            this.listInfo.pfunctionList.forEach((item) => {
              item.isHover = false;
            });

            this.pfunctionList = JSON.parse(
              JSON.stringify(this.listInfo.pfunctionList)
            );
            this.FncData = JSON.parse(
              JSON.stringify(this.listInfo.pfunctionList)
            );

            this.pfunctionList.forEach((item) => {
              if (item.paramInputClass) {
                item.paramInputClass = item.paramInputClass.split(",");
              } else {
                item.paramInputClass = [];
              }
              item.paramOutputClass = item.paramOutputClass.split(",");
            });
            if (this.listInfo.parequire) {
              this.prequireForm = this.listInfo.parequire
            }

            if (this.listInfo.paswitch) {
              this.paswitchForm = this.listInfo.paswitch;
            }
            if (this.listInfo.pamonitor) {
              this.pamonitorForm = this.listInfo.pamonitor;
            }
          }
        }
      );
    },
    //确定添加lib
    rlibraryEnt() {
      put_addPLibrary({libraryName: this.libraryName}).then((res) => {
        let {code, msg} = res.data;
        if (code == 0) {
          this.$message.success(msg);
          this.libraryShow = false;
          this.libraryName = "";
          this.getType();
        }
      });
    },
    //组件分类关闭
    rlibraryClo() {
      this.libraryShow = false;
      this.libraryName = "";
    },
    //新增组件分类
    libraryAdd() {
      this.libraryShow = true;
      this.$refs.mysel.blur();
    },
    //参数类型点击配置
    selType(val, arr, index) {
      this.PutIndex = index;
      this.TitleFlag = val;
      if (this.TitleFlag == 1) {
        this.tempType = arr;
      } else {
        this.tempType = arr;
      }
      this.paramType = true;
    },
    //点击弹框内的类型
    cliTag(val, index) {
      if (index == 1) {
        this.putType.push({
          name: val,
          value: ''
        });
      } else {
        if (this.outType.length == 1) {
          this.outType = [{
            name: val,
            value: ''
          }];
        } else {
          this.outType.push({
            name: val,
            value: ''
          });
        }
      }
    },
    //录入环境组件
    environmentFile(val) {
      let file = val.file;
      this.environmentForm.file = file;
    },
    //输入弹框点击取消
    noPut() {
      this.closeDia();
    },
    //类型添加确定
    addType() {
      let opt = {
        functionName: this.diaData.functionName,
        remarks: this.diaData.remarks,
        paramInputClass: this.putType.map(item => {
          return item.name + ' ' + item.value
        }).join(","),
        paramOutputClass: this.outType.map(item => {
          return item.name + ' ' + item.value
        }).join(","),
      };
      if (this.TitleFlag == 2) {
        opt.id = this.rowId;
        post_updateFunction(opt).then((res) => {
          let {code, msg} = res.data;
          if (code == 0) {
            this.$message.success(msg);
            this.getInfo();
            this.closeDia();
          }
        });
      } else {
        opt.PId = this.listInfo.plugins.id;
        put_funactonAdd(opt).then((res) => {
          let {code, msg} = res.data;
          if (code == 0) {
            this.$message.success(msg);
            this.getInfo();
            this.closeDia();
          }
        });
      }
    },
    //参数类型删除
    delType(val, index) {
      if (val == 1) {
        this.putType.splice(index, 1);
      } else {
        this.outType.splice(index, 1);
      }
    },
    //获取组件函数参数类型
    getType() {
      get_getPClass().then((res) => {
        this.cities = res.data.data;
      });
      get_getPLibrarySelect().then((res) => {
        this.Plx = res.data.data;
      });
    },
    // 保存
    preservation() {
      let opt = [];
      this.basicForm.id = this.listInfo.plugins.id;

      this.basicForm.pl = {
        libraryId: this.basicForm.libraryId
      }
      opt[0] = this.basicForm;
      opt[1] = this.prequireForm; // 运行
      opt[2] = this.paswitchForm; // 切换
      opt[3] = this.pamonitorForm;// 监控
      opt[1].paId = this.listInfo.plugins.id;
      opt[2].paId = this.listInfo.plugins.id;
      opt[3].paId = this.listInfo.plugins.id;
      if (opt[3].monitorType && opt[3].monitorType.length > 1) {
        opt[3].monitorType = Type2[opt[3].monitorType];
      }
      //保存修改的数据
      this.btnLoading = true
      put_updatePluginsInfo(opt).then((res) => {
        let {code, msg} = res.data;
        if (code === 0) {
          this.$message.success(msg);
        }
      }).finally(() => {
        this.btnLoading = false
      });
    },
    //关闭
    closeDia() {
      this.paramType = false;
      this.tempType = [];
      this.outType = [];
      this.putType = [];
      this.diaData = {functionName: "", remarks: ""};
    },
  },
};
</script>

<style lang="less" scoped>
  .edit-comp-body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;

    .scrollbar-box {
      padding: 15px;
    }

    .comp-item-group {
    }
  }

  .libBody {
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      white-space: nowrap;
      margin-right: 15px;
    }
  }

  .iptTile {
    margin: 10px 0;
  }

  .remark {
    margin-top: 10px;
  }

  .tag {
    display: flex;
    flex-wrap: wrap;

    .btnType {
      display: block;
      width: 100px;
      text-align: center;
      border: 1px solid #ffffff;
      line-height: 30px;
      margin-right: 13px;
      margin-bottom: 10px;
      cursor: pointer;
      position: relative;
      color: #ffffff;
      border-radius: 4px;

      .el-icon-circle-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
      }
    }
  }

  .fncName {
    display: flex;
    align-items: center;

    span {
      white-space: nowrap;
      margin-right: 15px;
    }

    .el-input {
      width: 180px;
    }
  }

  .tagContent {
    border: 1px solid #ffffff;
    width: 100%;
    height: 100px;
    margin-top: 10px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;

    .btnType {
      width: calc(33.3333% - 10px);
      text-align: center;
      border: 1px solid #ffffff;
      height: 30px;
      line-height: 30px;
      background-color: rgba(255, 255, 255, 1);
      margin: 5px;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      padding-right: 20px;
      border-radius: 4px;

      .label-text {
        width: 70px;
        flex-shrink: 0;
        height: 100%;
        background-color: #bfbebe;
        border-right: solid 1px rgb(78, 76, 76);
        color: #333;
      }

      .type-input {
        width: 100%;
        height: 100%;
        border: none;
        padding: 0 10px;
        background-color: transparent;
      }

      .el-icon-circle-close {
        position: absolute;
        width: 14px;
        height: 14px;
        right: 5px;
        top: 0;
        bottom: 0;
        margin: auto 0;
        cursor: pointer;
        color: #333;
      }
    }
  }


  .comp-item-box {
    margin-bottom: 15px;

    .comp-item-title {
      height: 40px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(3, 68, 108, 0.8);
      font-size: 17px;
      font-weight: bold;
    }

    .comp-item-cont {
      padding: 15px;
      border: solid 1px rgba(3, 68, 108, 0.5);
    }
  }

  .comp-item-btn-group {
    text-align: center;
    margin-top: 15px;
  }
</style>